<!DOCTYPE>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="@{/}">
    <meta charset="UTF-8">
    <title>首页</title>
    <!-- 加载Vue框架的库文件 -->
    <script src="js/vue.js"></script>
    <!-- 加载Axios框架的库文件 -->
    <script src="js/axios.js"></script>
    <!-- 加载jQuery的库文件 -->
    <script src="js/jquery-3.6.0.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 导入外部css文件 -->
    <link rel="stylesheet" href="css/navigationY.css">
</head>
<body>
<!-- 最上方logo -->
<div id="app">
    <div id="top">
        <div id="logo">
            <p>
                <span>禧创</span>
            </p>
            <i class="el-icon-s-operation"></i>
        </div>
        <div id="sub">
            <p>
                <span>OCP全渠道数字平台</span>
            </p>
        </div>
        <div id="detail">
            <el-row>
                <el-button class="el-icon-chat-dot-round" type="danger" style="color: white;" circle></el-button>
                <el-button class="el-icon-s-custom" type="danger" style="color: white;" circle></el-button>
            </el-row>
        </div>
        <div id="exit">
            <el-button class="el-icon-switch-button" type="danger" style="color: white;" circle></el-button>
        </div>
    </div>
    <!-- 上方导航栏 -->
    <div id="nav">
        <!-- 相应页面链接 -->
    </div>
    <!-- 侧边导航栏 -->
    <div id="left">
        <template>
            <div class="demo-type">
                <!--管理员头像-->
                <div class="img">
                    <el-avatar :size="60" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                </div>
                <div class="msg">
                    <!-- 管理员姓名 -->
                    <span>Name</span>
                    <br>
                    <span>管理员</span>
                </div>
            </div>
        </template>
        <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#989494"
                text-color="white"
        >
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-s-home" style="color: white"></i>
                    <span>首页</span>
                </template>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-document-copy" style="color: white"></i>
                    <span>备货订单管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="2-1">备货计划列表</el-menu-item>
                    <el-menu-item index="2-2">待审核备货订单</el-menu-item>
                    <el-menu-item index="2-3">待复核备货订单</el-menu-item>
                    <el-menu-item index="2-4">汇总计划列表</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title">
                    <i class="el-icon-data-line" style="color: white"></i>
                    <span>销售订单管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="3-1">零售订单列表</el-menu-item>
                    <el-menu-item index="3-2">批发订单列表</el-menu-item>
                    <el-menu-item index="3-3">待审核批发订单</el-menu-item>
                    <el-menu-item index="3-4">待复核批发订单</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
                <template slot="title">
                    <i class="el-icon-bell" style="color: white"></i>
                    <span>售后管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="4-1">待审核退换货订单列表</el-menu-item>
                    <el-menu-item index="4-2">退换货订单列表</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="5">
                <template slot="title">
                    <i class="el-icon-user" style="color: white"></i>
                    <span>经销商管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="5-1">经销商列表</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="6">
                <template slot="title">
                    <i class="el-icon-shopping-cart-full" style="color: white"></i>
                    <span>库存管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="6-1">仓库维护</el-menu-item>
                    <el-menu-item index="6-2">菜鸟仓库存列表</el-menu-item>
                    <el-menu-item index="6-3">工厂库存列表</el-menu-item>
                    <el-menu-item index="6-4">调拨单列表</el-menu-item>
                    <el-menu-item index="6-5">创建调拨单</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="7">
                <template slot="title">
                    <i class="el-icon-goods" style="color: white"></i>
                    <span>产品管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="7-1">产品列表</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="8">
                <template slot="title">
                    <i class="el-icon-suitcase-1" style="color: white"></i>
                    <span>内容维护</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="8-1">首页公告列表</el-menu-item>
                    <el-menu-item index="8-2">首页咨讯列表</el-menu-item>
                    <el-menu-item index="8-3">首页信息平台列表</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="9">
                <template slot="title">
                    <i class="el-icon-setting" style="color: white"></i>
                    <span>系统配置</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="9-1">运营账号管理</el-menu-item>
                    <el-menu-item index="9-2">经销商账号管理</el-menu-item>
                    <el-menu-item index="9-3">菜单管理</el-menu-item>
                    <el-menu-item index="9-4">运营角色管理</el-menu-item>
                    <el-menu-item index="9-5">日志</el-menu-item>
                    <el-menu-item index="9-6">数据字典</el-menu-item>
                    <el-menu-item index="9-7">机构管理</el-menu-item>
                    <el-menu-item index="9-8">产品类别</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </div>
</div>
</body>
<script type="module">
    let vm=new Vue({
        el:'#app',
        data(){
            return{

            };
        },
        methods:{
            handleOpen(key,keyPath){
                console.log(key,keyPath);
            },
            handleClose(key,keyPath){
                console.log(key,keyPath);
            },
        }
    });
</script>
</html>